聽說 JavaScript 所有東西都是物件?錯。
應該是除了六個(或七個)基本型別外,其他才是物件。
六個基本型別:
而物件的宣告方式分為兩種:字面值,以及建構形式
字面值
var myObj = {
key: value
// ...
}
建構式
var myObj = new Object();
myObj.key = value
思考:
知道了基本的樣子,但是到底什麼是物件呢?物件就像是
一個群集,包含了資料跟處理資料的方法。他可能長成這樣:
var introduction = {
name: 'Jim',
favFood: 'Sushi',
breakIce: function(){
console.log(`Hello I am ${this.name}, My favFood is ${this.favFood}`)
}
}
introduction.breakIce()
//結果:Hello I am Jim, My favFood is Sushi
introduction['breakIce']()
//結果:Hello I am Jim, My favFood is Sushi
當我們擁有了一個物件後,如何呼叫與存取呢?
有兩種方式分為特性存取(property access)與鍵值存取(key access)
特性存取利用.去連結後面的東西,但只接受識別字
鍵值存取用[..]呼叫,可包含UTF-8或Unicode特性名稱
大部分時間我們使用特性存取,但某些必要狀況必須因為
特性差異改用鍵值存取,例如非識別字或鍵值計算
var firstName = 'Hu'
var ages = {
'Hu Jim': 28,
'Hu Koa': 60
}
console.log(ages[firstName + ' Jim'])
ages[firstName + ' Ge'] = 30
console.log(ages)
//結果:28
VM178:13 {Hu Jim: 28, Hu Koa: 60, Hu Ge: 30}
我們可以看到空格包含在key值當中,這並非一般使用狀況
,但當遇到時還有應辦的辦法。我們也可以以同樣的方式存取
回去。
最後,我們應該學複製一個物件。
var firstName = 'Hu'
var ages = {
'Hu Jim': 28,
'Hu Koa': 60
}
// Shallow Clone
var agesNextYear = ages
agesNextYear[firstName + ' Jim'] = 29
console.log('Shallow Clone ages: ' + ages[firstName + ' Jim'])
console.log('Shallow Clone agesNextYear: ' + agesNextYear[firstName + ' Jim'])
//Deep Clone
var ages = {
'Hu Jim': 28,
'Hu Koa': 60
}
var agesNextYear = Object.assign({}, ages);
agesNextYear[firstName + ' Jim'] = 29
console.log('Deep Clone ages: ' + ages[firstName + ' Jim'])
console.log('Deep Clone agesNextYear: ' + agesNextYear[firstName + ' Jim'])
複製物件有兩種方式分為 Shallow Clone 與 Deep Clone ,
因為 JavaScript call by sharing 的特性,
所以物件裡,特性(property)都是以「位置」去紀錄資料的,
當我們直接指示一個物件給新宣告的物件,
新物件所擁有的特性(property)名稱,
參考到的是同一個物件的資料位置,當我們再給值進去時,
便會將新的資料(新值)位置賦予舊的特性(property)名稱
而覆蓋原本的值。視覺話之後如下圖。